<template>
	<view class="cart">
		<!-- 购物车商品展示列表 -->
		<view class="list">
			<evan-checkbox-group v-model="checkedList">
				<view class="item" v-for="(item,index) in cartList" :key="item.id">
					<view class="info-holder">
						<evan-checkbox :label="index" primary-color="#354e44" shape="square"></evan-checkbox>
						<view class="info">
							<image :src="item.productPic" mode=""></image>
							<view class="text-holder">
								<view class="name">
									{{item.productName}}
								</view>
								<view>
									编号：{{item.productSkuId}}
								</view>
								<view>
									价格：￥{{item.price}}
								</view>
								<view>
									数量：{{countList[index]}}
								</view>
							</view>
						</view>
					</view>

					<!-- 商品数量加减 -->
					<view class="count-holder">
						<view class="btn" @tap="reduceCount(index)">
							-
						</view>
						<view class="count">
							{{countList[index]}}
						</view>
						<view class="btn" @tap="addCount(index)">
							+
						</view>
					</view>
				</view>
			</evan-checkbox-group>
		</view>

		<!-- 底部结算栏 -->
		<view class="bottom">
			<view class="check-all">
				全选：
				<evan-checkbox primary-color="#354e44" v-model="checkAll" shape="square"></evan-checkbox>
			</view>

			<view class="all-price">
				<view class="text">
					合计：￥<text>{{sumPrice}}</text>
				</view>

				<view class="btn" @tap="toOrder">
					结算
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		requestFindAllCartItem,
		requestDeleteCartItem,
	} from 'api/user/cart.js';

	import {
		requestPreOrder
	} from 'api/user/order.js';

	import {
		mixin
	} from 'mixin/index.js';
	export default {
		mixins: [mixin],
		data() {
			return {
				// 被选择列表
				checkedList: [],
				// 购物车商品列表
				cartList: [],
				// 购物车商品每种的数量列表
				countList: [],
			}
		},
		methods: {
			// 跳转到结算界面
			toOrder() {
				if (this.checkedList.length === 0) {
					uni.showToast({
						title: '购物车为空',
						icon: 'none',
						duration: 2000,
					})

					return false
				} else {
					let arr = [];
					this.checkedList.forEach(val => {
						let obj = {};
						obj.productId = this.cartList[val].productId;
						obj.productSkuId = this.cartList[val].productSkuId;
						obj.productQuantity = this.countList[val];
						obj.cartId = this.cartList[val].id;
						arr.push(obj);
					})
					console.log(arr);
					requestPreOrder({
						"addressId": "",
						"orderId": "",
						orderItemList: arr,
						"payType": 0,
						"sourceType": 0
					}).then(res => {
						uni.showToast({
							title: '提交订单成功，1s后跳转',
							icon: 'none',
							duration: 1000,
						})

						setTimeout(() => {
							uni.navigateTo({
								url: `/pages/user/cart/pre-order/pre-order?orderId=${res.data.orderId}`
							})
						}, 1000)
					})
				}
			},
			// 获取购物车信息
			getCartList() {
				requestFindAllCartItem().then(res => {
					this.cartList = res.data.items;
					this.countList.length = this.cartList.length;
					this.cartList.forEach((val, index) => {
						this.countList[index] = val.quantity;
					})
					console.log(res);
				})
			},
			// 商品数量-
			reduceCount(index) {
				const _this = this;
				if (this.countList[index] > 1) {
					this.countList.splice(index, 1, --this.countList[index]);
				} else {
					uni.showModal({
						title: '提示',
						content: '是否从购物车删除该物品',
						showCancel: true,
						success: function(res) {
							if (res.confirm) {
								requestDeleteCartItem([_this.cartList[index].id]).then(res => {
									_this.getCartList();
									if (res.code === 20000) {
										uni.showToast({
											title: '删除商品成功',
											icon: 'success',
											duration: 2000,
										})
									}
									console.log(res);
								})
							} else if (res.cancel) {
								uni.showToast({
									title: '取消',
									icon: 'none',
									duration: 2000,
								})
							}
						}
					});
				}
			},
			// 商品数量+
			addCount(index) {
				this.countList.splice(index, 1, ++this.countList[index]);
			},
		},
		computed: {
			// 全选计算
			checkAll: {
				get() {
					return this.checkedList.length === this.cartList.length;
				},
				set(e) {
					this.checkedList = [];
					if (e) {
						let n = this.cartList.length;
						for (let i = 0; i < n; i++) {
							this.checkedList.push(i);
						}
					}
				}
			},
			// 总价计算
			sumPrice() {
				let sum = 0;
				this.checkedList.forEach(val => {
					sum += this.countList[val] * this.cartList[val].price;
				})
				return sum;
			}
		},
		onLoad() {
			this.token = uni.getStorageSync('token') ? uni.getStorageSync('token') : '';
			if (this.token) {
				this.getCartList();
			}
			this.showLoginModal();
		}
	}
</script>

<style lang="scss" scoped>
	.cart {
		.list {
			box-sizing: border-box;
			padding: 50rpx 40rpx;
			padding-bottom: 150rpx;
			width: 100%;

			.item {
				box-sizing: border-box;
				margin-bottom: 50rpx;
				padding: 20rpx;
				width: 100%;
				height: 240rpx;
				border-radius: 24rpx;
				background-color: #fff;

				.info-holder {
					display: flex;
					align-items: center;
					height: 136rpx;

					.info {
						margin-left: 32rpx;
						display: flex;
						align-items: center;

						image {
							display: block;
							height: 136rpx;
							width: 122rpx;
						}

						.text-holder {
							margin-left: 32rpx;
							font-size: 26rpx;
							color: #8d8d8d;

							.name {
								color: #3e3e3e;
							}
						}


					}

				}

				.count-holder {
					float: right;
					display: flex;
					justify-content: space-between;
					width: 246rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					font-size: 30rpx;

					.btn {
						margin: 0 6rpx;
						width: 60rpx;
						height: 60rpx;
						background: #f1ece7;
						border-radius: 50%;
					}

					.count {
						margin: 0 3px;
						height: 30px;
						width: 90rpx;
						background: #f1ece7;
						border-radius: 30rpx;
					}
				}
			}
		}

		.bottom {
			position: fixed;
			display: flex;
			justify-content: space-around;
			align-items: center;
			bottom: 0;
			left: 0;
			height: 150rpx;
			width: 100%;
			background-color: #fff;

			.check-all {
				display: flex;
				font-size: 32rpx;
			}

			.all-price {
				display: flex;
				align-items: center;
				font-size: 30rpx;

				text {
					color: #f00;
				}

				.btn {
					margin-left: 20rpx;
					display: inline-block;
					width: 208rpx;
					height: 80rpx;
					background: #354e44;
					border-radius: 28rpx;
					color: #fff;
					font-size: 36rpx;
					line-height: 80rpx;
					text-align: center;
				}
			}

		}
	}
</style>
